<template>
<div class="mod-demo-echarts">
    <el-row :gutter="20">
        <el-col :span="12">
            <el-card>
                <div id="readerBox" class="chart-box"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <div id="borrowBox" class="chart-box"></div>
            </el-card>
        </el-col>
        <el-col :span="24">
            <el-card>
                <div id="detailBorrowBox" class="chart-box"></div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            readerBox: null,
            borrowBox: null,
            detailBorrowBox: null
        }
    },
    mounted() {
        this.initReaderBox()
        this.initBorrowBox()
        this.initDetailBorrowBox()
    },
    activated() {
        // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
        if (this.readerBox) {
            this.readerBox.resize()
        }
        if (this.borrowBox) {
            this.borrowBox.resize()
        }
        if (this.detailBorrowBox) {
            this.detailBorrowBox.resize()
        }
    },
    methods: {
        initReaderBox() {
            var option = {
                'title': {
                    'text': '最近一周新增读者'
                },
                'tooltip': {
                    'trigger': 'axis'
                },
                'legend': {
                    'data': ['']
                },
                'grid': {
                    'left': '3%',
                    'right': '4%',
                    'bottom': '3%',
                    'containLabel': true
                },
                'toolbox': {
                    'feature': {
                        'saveAsImage': {}
                    }
                },
                'xAxis': {
                    'type': 'category',
                    'boundaryGap': false,
                    'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                'yAxis': {
                    'type': 'value'
                },
                'series': [{
                    'name': '注册数',
                    'type': 'line',
                    'stack': '总量',
                    'data': [12, 13, 10, 23, 9, 23, 3]
                }]
            }
            this.readerBox = echarts.init(document.getElementById('readerBox'))
            this.readerBox.setOption(option)
            window.addEventListener('resize', () => {
                this.readerBox.resize()
            })
        },

        initBorrowBox() {
            var option = {
                'title': {
                    'text': '最近一周借阅量'
                },
                'tooltip': {
                    'trigger': 'axis'
                },
                'legend': {
                    'data': ['']
                },
                'grid': {
                    'left': '3%',
                    'right': '4%',
                    'bottom': '3%',
                    'containLabel': true
                },
                'toolbox': {
                    'feature': {
                        'saveAsImage': {}
                    }
                },
                'xAxis': {
                    'type': 'category',
                    'boundaryGap': false,
                    'data': ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                'yAxis': {
                    'type': 'value'
                },
                'series': [{
                    'name': '借阅量',
                    'type': 'line',
                    'stack': '总量',
                    'itemStyle': {
                        'normal': {
                            'lineStyle': {
                                'color': 'rgb(145, 199, 174)'
                            }
                        }
                    },
                    'data': [120, 132, 101, 134, 90, 230, 210]
                }]
            }
            this.borrowBox = echarts.init(document.getElementById('borrowBox'))
            this.borrowBox.setOption(option)
            window.addEventListener('resize', () => {
                this.borrowBox.resize()
            })
        },

        initDetailBorrowBox() {
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
                    ]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['馆藏图示']
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                        name: 'A',
                        type: 'bar',
                        data: [3200]
                    },
                    {
                        name: 'B',
                        type: 'bar',

                        data: [1200]
                    },
                    {
                        name: 'C',
                        type: 'bar',

                        data: [2200]
                    },
                    {
                        name: 'D',
                        type: 'bar',

                        data: [1500]
                    },
                    {
                        name: 'E',
                        type: 'bar',
                        data: [8620]
                    },
                    {
                        name: 'D',
                        type: 'bar',
                        barWidth: 5,

                        data: [6200]
                    },
                    {
                        name: 'G',
                        type: 'bar',

                        data: [1200]
                    },
                    {
                        name: 'H',
                        type: 'bar',

                        data: [600]
                    },
                    {
                        name: 'I',
                        type: 'bar',

                        data: [620]
                    },
                    {
                        name: 'J',
                        type: 'bar',

                        data: [6200]
                    },
                    {
                        name: 'K',
                        type: 'bar',

                        data: [1520]
                    },
                    {
                        name: 'L',
                        type: 'bar',

                        data: [2500]
                    },
                    {
                        name: 'M',
                        type: 'bar',

                        data: [3000]
                    },
                    {
                        name: 'N',
                        type: 'bar',

                        data: [5000]
                    },
                    {
                        name: 'O',
                        type: 'bar',

                        data: [1000]
                    },
                    {
                        name: 'P',
                        type: 'bar',

                        data: [9000]
                    },
                    {
                        name: 'Q',
                        type: 'bar',

                        data: [500]
                    },
                    {
                        name: 'R',
                        type: 'bar',

                        data: [560]
                    },
                    {
                        name: 'S',
                        type: 'bar',
                        data: [1750]
                    },
                    {
                        name: 'T',
                        type: 'bar',
                        data: [890]
                    },
                    {
                        name: 'U',
                        type: 'bar',
                        data: [1750]
                    },
                    {
                        name: 'V',
                        type: 'bar',
                        data: [620]
                    },
                    {
                        name: 'W',
                        type: 'bar',
                        data: [2500]
                    },
                    {
                        name: 'X',
                        type: 'bar',
                        data: [6000]
                    },
                    {
                        name: 'Y',
                        type: 'bar',
                        data: [5000]
                    },
                    {
                        name: 'Z',
                        type: 'bar',
                        data: [3500]
                    }
                ]
            }
            this.detailBorrowBox = echarts.init(document.getElementById('detailBorrowBox'))
            this.detailBorrowBox.setOption(option)
            window.addEventListener('resize', () => {
                this.detailBorrowBox.resize()
            })
        }
    }
}
</script>

<style lang="scss">
.mod-demo-echarts {
    >.el-alert {
        margin-bottom: 10px;
    }

    >.el-row {
        margin-top: -10px;
        margin-bottom: -10px;

        .el-col {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    .chart-box {
        min-height: 400px;
    }
}
</style>
